<template>
    <div class="gas-sensor">
        <div class="gas-sensor-title">
            <div class="title">气体监测</div>
            <img src="@/assets/images/bigScreen/line1.png" alt="行为识别安全" class="title-img" />
        </div>
        <div class="gas-sensor-content">
            <div class="gas-sensor-item" v-for="(item, index) in gasList" :key="item.id">
                <!-- <div class="gas-sensor-item-img" v-if="item.deviceStatus === 1">
                    <div class="gas-sensor-item-img-url">
                        <img src="@/assets/images/bigScreen/gasDevice.png" alt="" class="gas-sensor-item-pic"
                            width="48px" height="48px" />
                    </div>
                    <div class="gas-sensor-item-name">{{ item.deviceName }}</div>
                </div>
                <div class="gas-sensor-item-img" v-else>
                    <div class="gas-sensor-item-img-url">
                        <img src="@/assets/images/bigScreen/gasDevice.png" alt="" class="gas-sensor-item-pic"
                            width="48px" height="48px" />
                    </div>
                    <div class="gas-sensor-item-name">{{ item.deviceName }}</div>
                </div> -->
                <div class="gas-sensor-item-content">
                    <div class="gas-sensor-item-content-img">
                        <img src="@/assets/images/bigScreen/gasDevice.png" alt="" class="gas-sensor-item-pic"
                            width="48px" height="48px" />
                    </div>
                    <div class="gas-sensor-item-content-info">
                        <div class="gas-sensor-item-name">探头位置：{{ item.controlBoxName }}</div>
                        <div class="gas-sensor-item-name">检测类型：{{ item.detectionGasType }}</div>
                        <div class="gas-sensor-item-name">当前值：{{ item.threshold }}</div>
                    </div>
                </div>
                <div class="gas-sensor-item-content-switch">
                    {{ item.fanInfo.fanNo }}
                    风机状态： <el-switch v-if="item.fanInfo.fanNo.includes('电磁阀')" v-model="item.fanInfo.state"
                        :active-value="1" :inactive-value="0" @change="switch1Change(item.fanInfo, $event)" />
                    <el-switch v-else v-model="item.fanInfo.state" :active-value="0" :inactive-value="1"
                        @change="switch1Change(item.fanInfo, $event)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getGasSensor, getFanDeveiceById, changeFanStatus } from '@/api/bigScreen/bigScreen.api'
import { onMounted, ref, computed } from 'vue'

interface GasSensor {
    id: number;
    sysOrgCode: string;
    updateTime: string;
    updateBy: string;
    createTime: string;
    createBy: string;
    deviceStatus: number;
    ipAddress: string;
    alertRule: any;
    threshold: number;
    rmId: string;
    flId: string;
    blId: string;
    deviceName: string;
    devicePath: string;
    requestCode: string;
    monitor: number;
    gasDeviceEm: string;
    detectorNo: string;
    fanNos: string;
    controlBoxName: string;
    detectionGasType: string;
    detectionGasTypeUnit: string;
    fanInfo?: any;
}

const gasList = ref<GasSensor[]>([])
function getGasList() {
    try {
        getGasSensor().then((res) => {
            if (res.code === 200) {
                gasList.value = res.result.records
            }
        }).then(() => {
            const interval = setInterval(() => {
                gasList.value.forEach(async (item) => {
                    const re = await getFanDeveiceById({
                        id: item.fanNos,
                    })

                    item.fanInfo = re.result
                })
            }, 5000);
            return () => {
                clearInterval(interval);
            };
        })
    } catch (error) {
        if (error instanceof Error) {
            ElMessage.error(error.message)
        }
    }
}

// function mountTime() {
//     const interval = setInterval(() => {
//         getGasList()
//     }, 5000);

//     return () => {
//         clearInterval(interval);
//     };
// }

onMounted(() => {
    getGasList()
})


// 风机设备信息接口
interface fanDevice {
    id: number;
    fanNo: string;
    blId: string;
    blCode: string;
    blName: string;
    createTime: string | null;
    flCode: string;
    flId: string;
    flName: string;
    installTime: string;
    ipAddress: string;
    registerAddress: string;
    rmCode: string;
    rmId: string;
    rmName: string;
    state: number;
    deviceName?: string;
}

// 定义开关事件的类型
type SwitchChangeEvent = number

// 开关切换事件
const switch1Change = async (formData: fanDevice, e: SwitchChangeEvent) => {
    // 记录当前状态，以便在出现错误时恢复
    const originalState = formData.state;
    const aimState = e;
    formData.state = aimState
    try {
        let res = await changeFanStatus(formData)
        if (res.code === 200) {
            getGasList()
        } else {
            // 让switch开关弹回关闭
            formData.state = originalState;
            ElNotification({
                title: '开启失败',
                message: '',
                type: 'error',
            })
        }
    } catch (error) {
        if (error instanceof Error) {
            ElNotification({
                title: '开启失败',
                message: `${error.message}`,
                type: 'error',
            })
        }
    }
}


</script>

<style lang="scss" scoped>
.gas-sensor {
    height: 100%;
    width: 100%;
    padding: 1px;
    background-image: url('@/assets/images/light_bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    .gas-sensor-title {
        height: 15%;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-weight: bold;
            color: darkturquoise;
        }

        .title-img {
            width: 30%;
            height: 30%;
        }
    }

    .gas-sensor-content {
        height: 85%;
        width: 100%;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .gas-sensor-item {
            box-sizing: border-box;
            width: 100%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            margin-bottom: 10px;

            .gas-sensor-item-content {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .gas-sensor-item-content-info {
                    font-size: 12px;
                }
            }
        }
    }
}
</style>